<template>
  <div class="household">
		 <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">添加住户信息</span>
      <span class="header-wrap-right"></span>
    </div>
    <!-- 选择小区 -->
    <div v-if="mark==true">
      <div class="household-content">
          <div class="household-list">
              <span>{{defaults}}</span>
              <!-- <span><i class="iconfont icon-xiajiantou"></i></span> -->
          </div>
      </div>
          <!-- 输入姓名 -->
      <div class="household-content">
          <div class="household-list">
              <van-field clearable v-model="household_name" placeholder="请输入户主姓名" />
          </div>
      </div>
          <!-- 输入电话 -->
      <div class="household-content">
          <div class="household-list">
              <van-field clearable v-model="mobile" placeholder="请输入手机号码" />
          </div>
      </div>
      <!-- 选择政治面貌 -->
      <div class="household-content" >
          <div class="household-list" @click="showrelationship" v-if="relationship">
              <span>{{relationship}}</span>
              <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
          <div class="household-list" @click="showrelationship" v-else>
              <span>请选择政治面貌</span>
              <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
      </div>
      <!-- 选择性别 -->
      <div class="household-content">
          <div class="household-list" @click="showSex" v-if="sex">
              <span>{{sex}}</span>
              <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
          <div class="household-list" @click="showSex" v-else>
              <span>请选择性别</span>
              <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
      </div>
      <!-- 是否特殊家庭 -->
      <div class="household-content">
          <div class="household-list" @click="showhouseHold" v-if="other">
              <span>{{other}}</span>
              <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
          <div class="household-list" @click="showhouseHold" v-else>
              <span>是否特殊家庭</span>
              <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
      </div>
      <!-- 特殊家庭说明 -->
      <div class="household-content" v-if="otherId==1">
          <div class="household-list">
              <van-field clearable v-model="other_remark" placeholder="特殊家庭说明" />
          </div>
      </div>

      <!-- 输入身份证 -->
      <div class="household-content">
          <div class="household-list">
              <van-field clearable v-model="idCard" placeholder="请输入身份证号" />
          </div>
      </div>
      <!-- 输入地址-->
      <div class="household-content">
          <div class="household-list">
              <van-field clearable v-model="address" placeholder="请输入居住地址" />
          </div>
      </div>    
      <!-- 确定 -->
      <div class="household-content" style="margin-top: .7rem;">
          <div class="submit" @click="addVolunteer">
              确定
          </div>
      </div>
    <!-- 社区选择  -->
      <van-popup v-model="PickerCommunity" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="cancel"
          @confirm="onConfirm"
        />
      </van-popup>
      <!-- 性别选择弹窗 -->
      <van-popup v-model="PickerSex" position="bottom" >
        <van-picker
          show-toolbar
          :columns="sexData"
          @cancel="cancel"
          @confirm="ConfirmSex"
        />
      </van-popup>
      <!-- 关系选择弹窗 -->
      <van-popup v-model="Pickerrelationship" position="bottom" >
        <van-picker
          show-toolbar
          :columns="relationshipData"
          @cancel="cancel"
          @confirm="ConfirmRelationship"
        />
      </van-popup>
      <!-- 家庭是否特殊弹窗 -->
      <van-popup v-model="Pickerhousehold" position="bottom" >
        <van-picker
          show-toolbar
          :columns="homeData"
          @cancel="cancel"
          @confirm="ConfirmHousehold"
        />
      </van-popup>
    </div>
    <HouseList v-if='show' @getContent="Switching" :msgData='Household'/>
  </div>
</template>
<script>
import api from '../../api/api.js'
import HouseList from './component/list'
import { Area,Popup,Picker,Dialog,Field } from 'vant';
export default {
  data(){
    return{
        show:false,
        mark:false,
        message:{},
        defaults:'',
        other:'',
        otherId:'',
        id:'',
        idCard:'',
        email:'',
        mobile:'',
        other_remark:'',
        household_name:'',
        address:'',
        sex:'',
        sexId:null,
        relationship: '',
        relationshipId: null,
        PickerCommunity:false,
        PickerSex:false,
        Pickerrelationship:false,
        Pickerhousehold:false,
        columns:[],
        Household:[],
      relationshipData:[
        {text:'中共党员',value:1},
        {text:'中共预备党员',value:2},
        {text:'共青团员',value:3},
        {text:'民革党员',value:4},
        {text:'民盟盟员',value:5},
        {text:'民建会员',value:6},
        {text:'民进会员',value:7},
        {text:'农工党党员',value:8},
        {text:'致公党党员',value:9},
        {text:'九三学社社员',value:10},
        {text:'台盟盟员',value:11},
        {text:'无党派人士',value:12},
        {text:'群众',value:13}
      ],
     	sexData:[
        {text:'男',value:1},
        {text:'女',value:2}
      ],
     	homeData:[
        {text:'是',value:1},
        {text:'否',value:0}
      ],
    }
  },
  created(){
    this.quarters()
    this.getHousehold()
    this.menu()
  },
  methods:{
    menu(){
      window.scrollTo(0, 0)
    },
    Switching(){
      console.log('123')
      this.mark = true
      this.show = false
    },
    goback(){
      this.$router.go(-1)
    },
    addVolunteer(){
    var regPartton = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
    var reg = /^([1][0-9]{10})$/;
      if(!this.household_name){
        this.$toast('请输入户主姓名')
        return
      }
      if(!this.mobile){
        this.$toast('请输入手机号码')
        return
      }
      if(!reg.test(this.mobile)){
      this.$toast("手机格式不正确");
      return
      }
	    if(!this.relationship){
        this.$toast('请选择政治面貌')
        return
      }
	    if(!this.sex){
        this.$toast('请选择性别')
        return
      }
    	 if(!this.other){
        this.$toast('请选择家庭情况')
        return
      }
      if(this.otherId==1&&!this.other_remark){
        this.$toast('请输入特殊情况说明')
        return
      }
	   if(!this.idCard){
        this.$toast('请输入身份证号')
        return
      }
      if(!regPartton.test(this.idCard)){
          this.$toast('身份证格式不正确')
          return
      }
	  if(!this.address){
      this.$toast("请输入居住地址");
      return
			}
      this.$post(api.addHousehold, {
          residential_id: this.communityId,
          household_name: this.household_name,
          sex: this.sexId,
          mobile: this.mobile,
          policital: this.relationshipId,
          id_card: this.idCard,
          other:this.otherId,
          address:this.address,
          other_remark:this.other_remark
      })
      .then((response) => {
        if(response.data.code===1){
          this.$toast('添加成功!')
          this.getHousehold()
          }else{
            this.$toast(response.data.msg)
          }
        })
      .catch((error) => {
        console.log(error);
      });
    },
	//获取小区
    quarters(){
      this.$get(api.quarters,{})
      .then((response) => {
        if(response.data.code==1){
          this.defaults = response.data.data.default_name
        }
      })
      .catch((error) => {
        console.log(error);
      });   
    },
	//获取住户列表
    getHousehold(){
      this.$get(api.Household,{})
      .then((response) => {
        console.log('Household',response)
        if(response.data.code==1){
          this.Household = response.data.data.list
          if(this.Household.length<=0){
            this.mark = true
            this.show = false
          }else{
            this.mark = false
            this.show = true
          }
        }
      })
      .catch((error) => {
        console.log(error);
      });  
    },
    cancel(){
      this.PickerSex = false;
      this.Pickerrelationship = false;
      this.PickerCommunity = false;
      this.Pickerhousehold = false;
    },
    // 性别确定FN
   	showSex(){
      this.PickerSex = true;
		},
		// 关系确定FN
   showrelationship(){
      this.Pickerrelationship = true;
		},
   showCommunity(){
      this.PickerCommunity = true;
        },
    showhouseHold(){
        this.Pickerhousehold = true;
    },
		// 社区确定FN
    onConfirm(value) {
      this.communityName = value.text
      this.communityId = value.id
    //   this.ShowConfirm = true
      this.PickerCommunity = false;
    },
    ConfirmHousehold(value){
        console.log('valueaaa',value)
      this.other = value.text
      this.otherId = value.value
    //   this.ShowConfirm = true
      this.Pickerhousehold = false;
    },
    ConfirmSex(value) {
			
      this.sex = value.text
      this.sexId = value.value
    //   this.ShowConfirm = true
      this.PickerSex = false;
		},
		ConfirmRelationship(value) {
				
      this.relationship = value.text
      this.relationshipId = value.value
    //   this.ShowConfirm = true
      this.Pickerrelationship = false;
    },

  },
  components:{
    HouseList,
    [Area.name]:Area,
    [Popup.name]:Popup,
    [Picker.name]:Picker,
    [Field.name]:Field,
    [Dialog.Component.name]: Dialog.Component
  }
}
</script>
<style>
.household .household-list .van-cell{
  background: none;
  color: #000;
  line-height: .55rem;
  padding: .24rem .3rem;
}
.household .van-field__control{
  font-size: .28rem;
}
</style>

<style scoped>
.household{
    margin-top: 1rem;
}
.list-content{
  display: flex;
  margin:.15rem .2rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: .45rem;
  font-weight: bold;
}
.list-content span{
  flex: 1;
}
.household .repairDetail-list{
  margin-bottom: .2rem;
  font-weight: bold;
}
.household .repairDetail-list .van-cell{
  background: none;
  padding: .26rem .3rem;
}
.household .repairDetail-textarea .van-cell{
  background: #2E294E;
  padding: .15rem .15rem;
  border: 1px solid #57c5c6;
  border-radius: .2rem;
}
.list-title{
	margin-left: .3rem;
}
.van-dialog{
  width: 75%;
}
.household-content{
  padding: .35rem .3rem;
  color: #000;
  font-weight: bold;
}
.household-title{
  display: block;
  margin-bottom: .2rem;
  font-size: .32rem;
}
.household-list{
  background: #fff;
  display: flex;
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  border: 0.02rem solid #ddd;
}
.household-list span:nth-of-type(1){
  text-indent: .35rem;
  flex: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.household-list span:nth-of-type(2){
  text-align: center;
  flex: 1;
}
.submit{
  color: #fff;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .45rem;
  text-align: center;
  font-weight: bold;
}
.noticeDetail-tips{
	margin: 0 .5rem;
}
.noticeDetail-tips span{
	line-height: .8rem;
	display: block;
	border-bottom: 1px solid #ccc;
}
</style>


